<template>
  <view class="container tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <!-- 图标logo -->
        <view class="custom-nav__back">
          <view class="custom-nav__back__logo spin">
            <view class="custom-nav__back__logo__image"></view>
          </view>
        </view>
        <!-- 文本块 -->
        <view class="custom-nav__back">
          <text class="tn-text-bold tn-text-xl tn-flex-row-left">呈心实易</text>
        </view>
      </view>
    </tn-nav-bar>

    <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <view class="justify-content-item tn-margin-left">
        <view class="tn-text-bold tn-text-lg tn-padding-bottom-xs">
          {{ phraseList.name || '' }}
        </view>
        <view class="tn-text-xs tn-color-cat" style="opacity: 0.5;">
          {{ phraseList.content || '' }}
        </view>
      </view>
    </view>

    <!-- 首页广告 -->
    <view class="tn-margin tn-skeleton-fillet tn-margin-top-lg">
      <tn-swiper :list="bannerList" @click="goAdvertisingView" :height="300" name="picture" interval="5000" duration="500"></tn-swiper>
    </view>

    <view class="tn-padding-bottom tn-strip-top">
      <view class="tn-flex tn-flex-row-between" @click="$parent.switchTabbar(1)">
        <view class="justify-content-item tn-margin tn-no-margin-bottom tn-text-bold tn-text-lg blue-title">
          最新文章
        </view>
        <view class="justify-content-item tn-content-center tn-margin tn-no-margin-bottom tn-text-md tn-color-gray">
          <text class="tn-padding-right-xs">更多</text>
          <text class="tn-icon-right"></text>
        </view>
      </view>

      <view class="tn-padding-top-sm">
				<cx-article-hot></cx-article-hot>
			</view>

      <view class="tn-flex tn-flex-row-between tn-margin-top tn-strip-top">
        <view class="justify-content-item tn-margin tn-no-margin-bottom tn-text-bold tn-text-lg blue-title">
          热门案例
        </view>
        <view class="justify-content-item tn-content-center tn-margin tn-no-margin-bottom tn-text-md tn-color-gray" @click="$parent.switchTabbar(2)">
          <text class="tn-padding-right-xs">更多</text>
          <text class="tn-icon-right"></text>
        </view>
      </view>

      <!-- 图文 -->
      <view class="tn-flex tn-flex-direction-column tn-padding-top-sm">
        <cx-project-hot></cx-project-hot>
      </view>

      <view class="tn-flex tn-flex-row-between tn-strip-top">
        <view class="justify-content-item tn-margin tn-no-margin-bottom tn-text-bold tn-text-lg blue-title">
          精选方案
        </view>
        <view class="justify-content-item tn-content-center tn-margin tn-no-margin-bottom tn-text-md tn-color-gray" @click="$parent.switchTabbar(3)">
          <text class="tn-padding-right-xs">更多</text>
          <text class="tn-icon-right"></text>
        </view>
      </view>

      <view class="tn-flex tn-flex-direction-column tn-padding-top-sm">
        <cx-demand-hot></cx-demand-hot>
      </view>
    </view>

    <view class='tn-tabbar-height'></view>
  </view>
</template>

<script>
  import base from '@/common/mixin/base.js'
  import request from '@/common/request.js';
  import CxProjectHot from "@/component/cx-project-hot/index.vue";
  import CxDemandHot from "@/component/cx-demand-hot/index.vue";
  import CxArticleHot from "@/component/cx-article-hot/index.vue";

  export default {
    name: 'Index',
    mixins: [base],
    components:{
      CxProjectHot,
			CxDemandHot,
			CxArticleHot
    },
    data(){
      return {
        is_hot: true,
        bannerList: {},
				phraseList: {},
      }
    },
    created() {
      this.getBannerData();
      this.getPhraseData();
    },
    methods: {
      /**
       * 获取首页广告数据
       */
      getBannerData: function() {
        request.httpRequest('advertising/select', {position__title: 'home_banner', limit: 4}).then(res => {
          this.bannerList = res;
        });
      },

			/**
       * 获取首页短语数据
       */
      getPhraseData: function() {
        request.httpRequest('business/phrase/data', {title: 'home'}).then(res => {
          this.phraseList = res;
        });
      },

      /**
       * 跳转到广告详情
       */
      goAdvertisingView: function(id) {
        this.goto('/pages/advertising/view', id);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/scss/common.scss';
</style>
